<template>
	<view class="container">
		<view class="content" ref="imgCanvas">
			<image src="/static/travelPlan/plan_bg.png" class='img_bg' mode="aspectFill"></image>
			<view v-if="planType == 'train'" class="train">
				<view class="card">
					<view class="flex justify_between line">
						<span class="name">订单号</span>
						<span class="val">GJAG4661617</span>
					</view>
					<view class="flex justify_between line">
					 	<span class="name">车次</span>
						<span class="val">G1617</span>
					</view>
					<view class="flex justify_between line">
						<span class="name">出发时间</span>
						<span class="val">2022-06-21 周五 10:06</span>
					</view>
					<view class="time_wrap">
						<view class="time_item flex justify_between">
							<view class="time_item_l">
								<view class="tiem">09:34</view>
								<view class="area">北京首都T2</view>
							</view>
								<image src="/static/travelPlan/icon_line.png" class='icon_line' mode="aspectFill"></image>
							<view class="time_item_r">
								<view class="tiem">09:34</view>
								<view class="area">北京首都T2</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 切换展示 -->
				<view class="flex switch_line">
					
				</view>
		</view>
		<image :src="imgUrl" mode=""></image>
		<button @click="saveImage" v-preventReClick>保存图片</button>
	</view>
</template>

<script>
	import listItem  from './component/listItem.vue'
	import html2canvas from "html2canvas"

	export default{
		components:{
			listItem
		},
		data(){
			return{
				list: [ 1, 2, 3, 4],
				planType: '',
				showContacts: false,
				imgUrl: ''
			}
		},
		onLoad(opt) {
			this.planType = opt.planType
		},
		methods:{
			//保存图片
			    saveImage() {
			      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
			      html2canvas(this.$refs.imgCanvas, {
			        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
			        useCORS: true, //支持图片跨域
			        scale: 1, //设置放大的倍数
			      }).then((canvas) => {
			        // 把生成的base64位图片上传到服务器,生成在线图片地址
			        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
			        this.imgUrl = url;  
			        //将图片下载到本地
			        // let a = document.createElement("a"); // 生成一个a元素
			        // let event = new MouseEvent("click"); // 创建一个单击事件
			        // a.download = name || "截图名称"; // 设置图片名称没有设置则为默认
			        // a.href = this.imgUrl; // 将生成的URL设置为a.href属性
			        // a.dispatchEvent(event); // 触发a的单击事件
			      });
			    },
		}
	}
</script>

<style lang="scss">
	.flex{
		display: flex;
		align-items: center;
		&.justify_between{
			justify-content: space-between;
		}
	}
	.container{
		position: relative;
		width: 100%;
		background: #F7F7F7;
		.content{
			background: #ACD4FD;
			.img_bg{
				width: 750rpx;
				height: 417rpx;
			}
			.card{
				margin: 20rpx 32rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.line{
					margin: 0 0 30rpx 0;
				}
				.name{
					font-weight: 400;
					color: #666666;
					line-height: 45rpx;
				}
				.val{
					font-weight: 500;
					// color: #333333;
					line-height: 45rpx;
				}
				.time_wrap{
					.time_item{
						position: relative;
						padding: 30rpx 20rpx;
						background: linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%);
						// background: #F7F7F7;
						border-radius: 4px;
						&_l{
							text-align: left;
						}
						&_r{
							text-align: right;
						}
						.tiem{
							font-size: 54rpx;
							font-weight: 500;
							color: #000;
							line-height: 75rpx;
						}
						.area{
							line-height: 38rpx;
							font-size: 26rpx;
							margin-top: 4rpx;
						}
						
					}
					.icon_line{
						position: absolute;
						top:50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 90rpx;
						height: 10rpx;
						}
				}
				
			}
			
		}
		
	}
</style>